<template>
  <div class="app-container">
    <el-form size="small" inline>
      <el-form-item label="企业名称">
        <el-input v-model="query.name" placeholder="请输入企业名称" clearable />
      </el-form-item>
      <el-form-item label="统一社会信用代码">
        <el-input v-model="query.corpCode" placeholder="请输入统一社会信用代码" clearable />
      </el-form-item>
      <el-form-item label="所属地区">
        <agriculture-region :value.sync="query.region" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="query.corpState" placeholder="请选择状态" clearable>
          <el-option
            v-for="item in dict.type.agriculture_state"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
        <el-button plain icon="el-icon-refresh" @click="handleReset"> 重置</el-button>
        <el-button plain icon="el-icon-plus" type="success" @click="dialogVisible = true">新增</el-button>
        <help></help>
      </el-form-item>
    </el-form>
    <el-table border v-loading="loading" :data="list">
      <el-table-column align="center" label="企业名称" prop="name" min-width="120" show-overflow-tooltip />
      <el-table-column align="center" label="统一社会信用代码" prop="corpCode" min-width="130" />
      <el-table-column align="center" label="企业类型" min-width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.agriculture_corp_type" :value="scope.row.corpType" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="地址" prop="address" min-width="120" show-overflow-tooltip />
      <el-table-column align="center" label="所属地区" min-width="110" show-overflow-tooltip>
        <template slot-scope="scope">
          <agriculture-region :value.sync="scope.row.deptId" type="text" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="联络人姓名" prop="linkMan" min-width="100" />
      <el-table-column align="center" label="联系方式" prop="phone" min-width="110" />
      <el-table-column align="center" label="状态" min-width="80">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.agriculture_state" :value="scope.row.corpState" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="70">
        <template slot-scope="scope">
          <el-button type="text" size="small" icon="el-icon-document" @click="corpInfo(scope.row.manageId)"
            >详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="query.pageNum"
      :limit.sync="query.pageSize"
      @pagination="getList"
    />
    <help-dialog :title="title" :visible.sync="dialogVisible" @close="closeDialog">
      <el-form size="small" label-width="160px" ref="form" :model="queryParam" :rules="rules">
        <div class="label">企业经营户信息</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="企业名称" prop="name">
              <el-input v-model="queryParam.name" placeholder="请输入企业名称" clearable :disabled="disabled" />
            </el-form-item>
            <el-form-item label="所属地区" prop="deptId">
              <agriculture-region :value.sync="queryParam.deptId" :disabled="disabled" />
            </el-form-item>
            <el-form-item label="企业类型" prop="corpType">
              <el-select v-model="queryParam.corpType" placeholder="请选择企业类型" clearable :disabled="disabled">
                <el-option
                  v-for="item in dict.type.agriculture_corp_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="法人/负责人证件号码" prop="idcardNumber">
              <el-input
                v-model="queryParam.idcardNumber"
                placeholder="请输入法人/负责人证件号码"
                clearable
                :disabled="disabled"
              />
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
              <el-input
                v-model="queryParam.phone"
                maxlength="11"
                placeholder="请输入联系方式"
                clearable
                :disabled="disabled"
              />
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input v-model="queryParam.address" placeholder="请输入地址" clearable :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="统一社会信用代码" prop="corpCode">
              <el-input
                v-model="queryParam.corpCode"
                placeholder="请输入统一社会信用代码"
                clearable
                :disabled="disabled"
              />
            </el-form-item>
            <el-form-item label="法人/负责人姓名" prop="legalMan">
              <el-input
                v-model="queryParam.legalMan"
                placeholder="请输入法人/负责人姓名"
                clearable
                :disabled="disabled"
              />
            </el-form-item>
            <el-form-item label="联络人姓名" prop="linkMan">
              <el-input v-model="queryParam.linkMan" placeholder="请输入联络人姓名" clearable :disabled="disabled" />
            </el-form-item>
            <el-form-item label="经营范围" prop="manageRange">
              <el-input v-model="queryParam.manageRange" placeholder="请输入经营范围" clearable :disabled="disabled" />
            </el-form-item>
            <el-form-item label="状态" prop="corpState">
              <el-select
                v-model="queryParam.corpState"
                placeholder="请选择状态"
                clearable
                :disabled="disabled"
                style="width: 100%"
              >
                <el-option
                  v-for="item in dict.type.agriculture_state"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="营业执照附件" prop="file">
              <y-show-all-file v-if="disabled" :path="queryParam.file"></y-show-all-file>
              <y-upload
                v-else
                accept=".jpeg,.jpg,.png"
                limit="1"
                :path="[queryParam.file]"
                ref="file"
                @onSuccess="successFile"
              ></y-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <div class="label">土地信息</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="土地编码/地宗号" prop="landCode">
              <el-input
                v-model="queryParam.landCode"
                placeholder="请输入土地编码/地宗号"
                @input="changeLandCode"
                clearable
                :disabled="disabled"
              />
            </el-form-item>
            <el-form-item label="面积（亩）" prop="area">
              <el-input v-model="queryParam.area" :disabled="read" placeholder="请输入面积（亩）" clearable />
            </el-form-item>
            <el-form-item label="坐标（西至）" prop="west">
              <el-input v-model="queryParam.west" :disabled="read" placeholder="请输入坐标（西至）" />
            </el-form-item>
            <el-form-item label="坐标（北至）" prop="north">
              <el-input v-model="queryParam.north" :disabled="read" placeholder="请输入坐标（北至）" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属地区" prop="areaCode">
              <agriculture-region :value.sync="queryParam.areaCode" :disabled="read" />
            </el-form-item>
            <el-form-item label="是否农田" prop="basicLand">
              <el-select
                v-model="queryParam.basicLand"
                :disabled="read"
                placeholder="请选择是否基本农田"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in dict.type.agriculture_basic_land"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="坐标（东至）" prop="east">
              <el-input v-model="queryParam.east" :disabled="read" placeholder="请输入坐标（东至）" />
            </el-form-item>
            <el-form-item label="坐标（南至）" prop="south">
              <el-input v-model="queryParam.south" :disabled="read" placeholder="请输入坐标（南至）" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="label">转让信息</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="转出方" prop="transferor">
              <el-input v-model="queryParam.transferor" placeholder="请输入转出方" clearable :disabled="disabled" />
            </el-form-item>
            <el-form-item label="流转方式" prop="circulationType">
              <el-select
                v-model="queryParam.circulationType"
                placeholder="请选择流转方式"
                clearable
                :disabled="disabled"
                style="width: 100%"
              >
                <el-option
                  v-for="item in dict.type.circulation_type"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="流转费（亩）" prop="circulationFee">
              <el-input
                v-model="queryParam.circulationFee"
                placeholder="请输入流转费（亩）"
                clearable
                :disabled="disabled"
              />
            </el-form-item>
            <el-form-item label="合同附件" prop="contractFile">
              <y-show-all-file v-if="disabled" :path="queryParam.contractFile"></y-show-all-file>
              <y-upload
                v-else
                accept=".jpeg,.jpg,.png"
                limit="1"
                ref="contractFile"
                :path="[queryParam.contractFile]"
                @onSuccess="successContractFile"
              ></y-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="idcardNumber">
              <el-input
                v-model="queryParam.idcardNumber"
                placeholder="请输入身份证号"
                maxlength="18"
                clearable
                :disabled="disabled"
              />
            </el-form-item>
            <el-form-item label="所属地区" prop="transferorArea">
              <agriculture-region :value.sync="queryParam.transferorArea" :disabled="disabled" />
            </el-form-item>
            <el-form-item label="经营期限" prop="manageTime">
              <el-input v-model="queryParam.manageTime" placeholder="请输入经营期限" clearable :disabled="disabled" />
            </el-form-item>
            <el-form-item label="总计（元）" prop="total">
              <el-input v-model="queryParam.total" placeholder="请输入" clearable :disabled="disabled" />
            </el-form-item>
          </el-col> 
        </el-row> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button v-if="queryParam.manageId" type="primary" @click="updateCorp">更 新</el-button>
        <el-button v-else type="primary" @click="addCorp">确 定</el-button>
      </span>
    </help-dialog>
  </div>
</template>

<script>
import corpApi from '@/api/manage/corp'
import landApi from '@/api/land/land'
import { debounce } from '@/utils/common'
import AgricultureRegion from '@/components/AgricultureRegion/AgricultureRegion'

export default {
  dicts: ['agriculture_state', 'agriculture_basic_land', 'agriculture_corp_type', 'circulation_type'],
  components: { AgricultureRegion },
  data() {
    return {
      query: {
        name: '',
        corpCode: '',
        corpState: '',
        pageNum: 1,
        pageSize: 10
      },
      list: [],
      loading: false,
      total: 0,
      title: '企业经营添加',
      disabled: false,
      dialogVisible: false,
      read: false,
      queryParam: {
        name: '',
        corpCode: '',
        corpType: '',
        legalMan: '',
        // idcardNumber2: '',
        linkMan: '',
        phone: '',
        manageRange: '',
        address: '',
        corpState: '1',
        deptId: '',
        file: '',
        landCode: '',
        areaCode: '',
        area: '',
        west: '',
        basicLand: '',
        east: '',
        south: '',
        north: '',
        transferor: '',
        idcardNumber: '',
        circulationType: '',
        circulationFee: '',
        contractFile: '',
        transferorArea: '',
        manageTime: '',
        total: ''
      },
      rules: {
        name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        corpCode: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
        region: [{ required: true, message: '请选择所属地区', trigger: 'blur' }]
        // landCode: [{ required: true, message: '请输入土地编码/地宗号', trigger: 'blur' }],
        // areaCode: [{ required: true, message: '请选择所属地区', trigger: 'blur' }],
        // area: [{ required: true, message: '请输入面积（亩）', trigger: 'blur' }],
        // transferor: [{ required: true, message: '请输入转出方', trigger: 'blur' }],
        // transferorArea: [{ required: true, message: '请选择所属地区', trigger: 'blur' }],
        // circulationType: [{ required: true, message: '请选择流转方式', trigger: 'blur' }],
        // idcardNumber: [
        //   { required: true, message: '请输入身份证号', trigger: 'blur' },
        //   { min: 18, max: 18, message: '请输入正确的身份证' }
        // ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      corpApi.corpManageList(this.query).then((res) => {
        this.list = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    handleReset() {
      this.query = {
        name: '',
        corpCode: '',
        corpState: '',
        pageNum: 1,
        pageSize: 10
      }
      this.getList()
    },
    successFile(file) {
      this.queryParam.file = file.router
    },
    successContractFile(file) {
      this.queryParam.contractFile = file.router
    },
    changeLandCode: debounce(function (val) {
      // 搜索土地编码/地宗号 数据回显
      landApi.landInfo({ landCode: val }).then((res) => {
        if (res.data) {
          this.read = true

          this.queryParam = {
            ...this.queryParam,
            areaCode: res.data.areaCode,
            east: res.data.east,
            west: res.data.west,
            south: res.data.south,
            north: res.data.north,
            area: res.data.area,
            basicLand: res.data.basicLand
          }
        } else this.read = false
      })
    }, 1000),
    addCorp() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          // 当前土地不存在，新增土地
          if (!this.read && this.queryParam.landCode) {
            await landApi.addLandData({
              landCode: this.queryParam.landCode,
              areaCode: this.queryParam.areaCode,
              east: this.queryParam.east,
              west: this.queryParam.west,
              south: this.queryParam.south,
              north: this.queryParam.north,
              area: this.queryParam.area,
              basicLand: this.queryParam.basicLand
            })
          }
          const { code } = await corpApi.corpManageAdd(this.queryParam)
          if (code == 200) {
            this.closeDialog()
            this.getList()
          }
        } else {
          return false
        }
      })
    },
    closeDialog() {
      this.$refs.form.clearValidate()
      if (!this.disabled) {
        this.$refs.file.clearFiles()
        // this.$refs.contractFile.clearFiles()
      }

      this.dialogVisible = false
      this.disabled = false
      this.read = false
      this.title = '企业经营添加'
      this.queryParam = {
        name: '',
        corpCode: '',
        corpType: '',
        legalMan: '',
        // idcardNumber2: '',
        linkMan: '',
        phone: '',
        manageRange: '',
        address: '',
        corpState: '',
        region: '',
        file: '',
        landCode: '',
        areaCode: '',
        area: '',
        west: '',
        basicLand: '',
        east: '',
        south: '',
        north: '',
        transferor: '',
        idcardNumber: '',
        circulationType: '',
        circulationFee: '',
        contractFile: '',
        transferorArea: '',
        manageTime: '',
        total: ''
      }
    },
    corpInfo(manageId) {
      corpApi.corpManageDetail({ manageId: manageId }).then((res) => {
        this.queryParam = res.data
        this.disabled = false
        this.read = true
        this.title = '企业经营详情'
        this.dialogVisible = true
      })
    },
    updateCorp() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          // 当前土地不存在，新增土地
          if (!this.read && this.queryParam.landCode) {
            await landApi.addLandData({
              landCode: this.queryParam.landCode,
              areaCode: this.queryParam.areaCode,
              east: this.queryParam.east,
              west: this.queryParam.west,
              south: this.queryParam.south,
              north: this.queryParam.north,
              area: this.queryParam.area,
              basicLand: this.queryParam.basicLand
            })
          }
          await corpApi.corpManageUpdate(this.queryParam)
          this.closeDialog()
          this.getList()
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.label {
  font-size: 16px;
  font-weight: 700;
  color: #409eff;
  margin: 20px 0;
  border-left: 3px solid;
  padding-left: 5px;
  line-height: 20px;
}
</style>